<template>
  <div>
    <el-dialog :title="titlecom" :visible.sync="dialogFormVisible" width="600px">
      <!-- :rules="rules" -->
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产品分类" :label-width="formLabelWidth" prop="classify">
          <el-select v-model="form.state" placeholder="产品分类" filterable class="specificationInput">
            <el-option v-for="a in reqCategory2" :key="a.id" :label="a.name" :value="a.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" prop="classify">
          <el-select v-model="form.typ" placeholder="类型" filterable class="specificationInput">
            <el-option v-for="a in reqCategory1" :key="a.id" :label="a.name" :value="a.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="form.price" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="原价" :label-width="formLabelWidth" prop="originalprice">
          <el-input v-model="form.originalprice" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="多少天" :label-width="formLabelWidth" prop="day">
          <el-input v-model="form.day" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="使用次数" :label-width="formLabelWidth" prop="num">
          <el-input v-model="form.num" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="到期前几天弱提醒" :label-width="formLabelWidth" prop="weak">
          <el-input v-model="form.weak" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="到期前几天强提醒" :label-width="formLabelWidth" prop="strong">
          <el-input v-model="form.strong" class="specificationInput"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingtianjia()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addvippackageadd,
    updatevippackageupdate
  } from "@/api/vippackage";
  import EditorBar from "@/components/Editor";
  import draggable from "vuedraggable";
  export default {
    components: {
      EditorBar,
      draggable,
    },
    data() {
      return {
        reqCategory2: [{
            id: 1,
            name: "基础产品"
          },
          {
            id: 2,
            name: "收款"
          },
          {
            id: 3,
            name: "优惠卷"
          },
          {
            id: 4,
            name: "充值购"
          },
          {
            id: 5,
            name: "单品快卖"
          },
          {
            id: 6,
            name: "商城"
          },
          {
            id: 7,
            name: "会员系统"
          },
          {
            id: 8,
            name: "通用套餐"
          },
        ],
        reqCategory1: [{
            id: 1,
            name: "落地页"
          },
          {
            id: 2,
            name: "正常套餐"
          },
        ],
        dialogFormVisible: false,
        formLabelWidth: "160px",
        form: {
          name: "",
          price: "",
          originalprice: "",
          day: "",
          state: 0,
          typ: 0,
          num: "",
          weak: "",
          strong: "",
        },
        imgList: [],
        dialogImageUrl: "",
        dialogVisible1: false,
        rules: {
          name: [{
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }],
          price: [{
            required: true,
            message: "请输入价格",
            trigger: "blur"
          }],
          originalprice: [{
            required: true,
            message: "请输入原价",
            trigger: "blur",
          }, ],
          day: [{
            required: true,
            message: "请输入多少天",
            trigger: "blur"
          }],
          num: [{
            required: true,
            message: "请输入几个",
            trigger: "blur"
          }],
        },
        qubie: 0,
      };
    },
    methods: {
      changeselect(val) {
        // console.log(val);
        this.form.servetypeid = val.id;
        this.form.servetype = val.name;
      },
      change() {},

      add() {
        this.form = {
          name: "",
          state: 0,
          typ: 0,
          price: "",
          originalprice: "",
          day: "",
          num: "",
          weak: "",
          strong: "",
        };
        this.qubie = 0;

        this.dialogFormVisible = true;
        this.imgList = [];
      },
      edit(val) {
        this.form = {
          name: "",
          price: "",
          state: 0,
          typ: 0,
          originalprice: "",
          day: "",
          num: "",
          weak: "",
          strong: "",
        };
        this.qubie = 1;

        this.form = Object.assign(this.form, val);
        this.dialogFormVisible = true;
        this.imgList = [];
      },
      // 关闭
      handleClose() {
        this.dialogFormVisible = false;
        this.$emit("refresh");
      },

      async quedingtianjia() {
        if (this.qubie == 0) {
          let param = {
            name: this.form.name,
            state: this.form.state,
            typ: this.form.typ,
            price: parseFloat(this.form.price),
            originalprice: parseFloat(this.form.originalprice),
            day: parseInt(this.form.day),
            num: parseInt(this.form.num),
            weak: parseInt(this.form.weak),
            strong: parseInt(this.form.strong),
          };
          let result = await addvippackageadd(param);
          if (result.code == 0) {
            this.$message({
              message: `添加vip套餐成功`,
              type: "success",
            });
            this.handleClose();
          }
        } else if (this.qubie == 1) {
          let param = {
            id: parseInt(this.form.id),
            name: this.form.name,
            state: this.form.state,
            typ: this.form.typ,
            price: parseFloat(this.form.price),
            originalprice: parseFloat(this.form.originalprice),
            day: parseInt(this.form.day),
            num: parseInt(this.form.num),
            weak: parseInt(this.form.weak),
            strong: parseInt(this.form.strong),
          };
          let result = await updatevippackageupdate(param);
          if (result.code == 0) {
            this.$message({
              message: `修改vip套餐成功`,
              type: "success",
            });
            this.handleClose();
          }
        }
      },
    },
    watch: {
      imgList: {
        handler(newVal) {
          // console.log("监听", newVal);
          // 这里创建新的数组 用逗号进行隔开 主要是接口要求
          let imagesarr = [];
          const result = newVal.map((item) => `${item.url}`).join(",");
          // this.form.content = result;
          console.log("猪嗨", this.form.content);
        },
        deep: true,
      },
    },
    computed: {
      titlecom() {
        if (this.qubie == 0) {
          return "添加vip套餐";
        } else {
          return "修改vip套餐";
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .specificationInput {
    width: 300px;
  }

  .avatar-uploader-icon[data-v-22a48a68] {
    border: 1px dashed #d9d9d9;
    width: 148px;
    height: 148px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 148px;
    height: 148px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .addguigeBtn {
    margin-left: 100px;
    margin-bottom: 22px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }

  .avatar {
    width: 180px;
    height: 180px;
    display: block;
  }

  v-deep .el-upload--picture-card {
    width: 200px !important;
    height: 200px !important;
  }

  .specificationInput1 {
    width: 150px;
  }
</style>
